<template>
	<div class="div1">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>咨询预约管理</el-breadcrumb-item>	
			</el-breadcrumb>
		</div>
	<div class="container">
		<!-- 搜索区域 -->
		<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
			<el-form-item label="预约用户"  size="large">
				<el-input  v-model="queryInfo.userName" placeholder="请输入用户名"></el-input>
			</el-form-item>
			
			<el-form-item label="咨询师" size="large">
					<el-select @clear="queryInfo.consultName=''" clearable v-model="queryInfo.consultName" placeholder="无" size="large"
						style="width: 240px">
						<el-option v-for="(item,index) in AllAuthor" :value="item.consultName"
							:label="item.consultName" />
					</el-select>
				</el-form-item>
			<el-form-item>
				<el-button type="primary" size="large" @click="queryDataList">搜索</el-button>
				<el-button type="danger" size="large" @click="handleBatchRemove">批量删除</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格区域 -->
		<el-table :data="dataList" border style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="85"></el-table-column>
			<el-table-column prop="reservationTime" label="预约时间"></el-table-column>
			<el-table-column prop="situationDesc" label="情况说明"></el-table-column>
			<el-table-column prop="userName" label="预约用户"></el-table-column>
			<el-table-column prop="consultName" label="咨询师"></el-table-column>
			<el-table-column label="操作" width="200">
				<template #default="scope">
					<el-button type="primary" @click="createOrUpdate(scope.row.id)">编辑</el-button>
					<el-button type="danger" @click="handleRemove(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<!-- 编辑弹窗表单 -->
		<el-dialog v-model="dialogFormVisible" title="编辑咨询预约" width="500px" @close="handleClose">
			<el-form :model="form" label-width="100px">
				<el-form-item label="预约时间">
					<el-date-picker v-model="form.reservationTime" type="datetime" placeholder="请选择预约时间" style="width: 100%;" />
				</el-form-item>
				<el-form-item label="咨询师">
					<el-select v-model="form.consultId" placeholder="请选择咨询师" style="width: 100%;">
						<el-option v-for="item in consultList" :key="item.id" :label="item.consultName" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="情况说明">
					<el-input v-model="form.situationDesc" type="textarea" placeholder="请输入情况说明" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" @click="handleSubmit">保存</el-button>
			</template>
		</el-dialog>
	</div>


</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	// 查询信息对象
	const queryInfo = reactive({
		userName: '',
		consultId: '',
		pageNum: 1,
		pageSize: 10,
		consultName: ''
	})
	const consultId = ref('')
	// 总数量
	const total = ref(0)
	// 数据列表
	const dataList = ref([])
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	// 获取列表数据
	// 获取列表数据（分页条件查询）
	const queryDataList = () => {
		axios.get(
			`/consultReservation/findReservationPage?pageNum=${queryInfo.pageNum}&pageSize=${queryInfo.pageSize}&userName=${queryInfo.userName}&consultName=${queryInfo.consultName}`
		).then(resp => {
			if (resp.code == 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('查询失败')
			}
		})
	}
	// // 页面挂载完毕，立刻请求数据
	onMounted(() => {
		getConsultList()
		queryDataList()
		getAllAuthor()
	})
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		console.log(val);
		multipleSelection.value = val
	}
	const handleSizeChange = (size) => {
		queryInfo.pageSize = size
		queryDataList()
	}
	const handleCurrentChange = (num) => {
		queryInfo.pageNum = num
		queryDataList()
	}
	// 批量删除
	const handleBatchRemove = () => {
		if (multipleSelection.value.length === 0) {
			ElMessage.warning('请选择要删除的记录');
			return;
		}
		ElMessageBox.confirm('确定要批量删除选中的记录吗？', '提示', {
			type: 'warning'
		}).then(() => {
			const ids = multipleSelection.value.map(item => item.id);
			axios.delete('/consultReservation/removeBatch', { data: ids }).then(resp => {
				if (resp.code == 200) {
					ElMessage.success('批量删除成功');
					queryDataList();
				} else {
					ElMessage.error('批量删除失败');
				}
			});
		});
	}
	// 单个删除
	const handleRemove = (id) => {
		ElMessageBox.confirm('确定要删除该记录吗？', '提示', {
			type: 'warning'
		}).then(() => {
			axios.delete(`/consultReservation/remove/${id}`).then(resp => {
				if (resp.code == 200) {
					ElMessage.success('删除成功');
					queryDataList();
				} else {
					ElMessage.error('删除失败');
				}
			});
		});
	}

	const dialogFormVisible = ref(false)
	const form = ref({
		id: '',
		reservationTime: '',
		consultName: '',
		situationDesc: ''
	})
	const consultList = ref([])
	const getConsultList = () => {
		axios.get('/consult').then(resp => {
			if (resp.code == 200) {
				consultList.value = resp.data
			}
		})
	}
	const handleClose = () => {
		dialogFormVisible.value = false
		form.value = {
			id: '',
			reservationTime: '',
			consultName: '',
			situationDesc: ''
		}
	}
	const createOrUpdate = (id) => {
		dialogFormVisible.value = true
		getConsultList()
		if (!id) {
			handleClose()
		} else {
			axios.get(`/consultReservation/findById/${id}`).then(resp => {
				form.value = resp.data
			})
		}
	}
	const handleSubmit = () => {
		const api = form.value.id ? '/consultReservation/edit' : '/consultReservation/add'
		axios({
			method: form.value.id ? 'put' : 'post',
			url: api,
			data: form.value
		}).then(resp => {
			if (resp.code == 200) {
				ElMessage.success('保存成功')
				dialogFormVisible.value = false
				queryDataList()
			} else {
				ElMessage.error('保存失败')
			}
		})
	}

	const AllAuthor = ref([])
		const getAllAuthor = () => {
		axios.get(`/consult`).then(resp => {
			AllAuthor.value = resp.data
		})
	}

</script>

<style scoped>
.div1 {
			border-bottom: 1px solid #eeeeee;
			width: 100%;
			height: 30px;
			padding-top: 10px;
		}
		.container {
				margin: 10px 10px;
				color: #696a6e;
			}
		
</style>